<template>
  <div class="activity-out-box">
    <div
      class="activityItem"
      v-for="(item, index) in activityContent"
      :key="index"
      :style="{ background: getBgColor }"
    >
      <div class="time">
        <icon
          iconClass="shijian_o"
          style="color: #fff; width: 30px; height: 30px; cursor: pointer"
        ></icon>
        <span>{{ item.date }}</span>
      </div>
      <div class="title" :title="item.eventName">
        <div class="white-omit">
          <span>{{ item.eventName }}</span>
        </div>
      </div>
      <div class="location" :title="item.place">
        <icon
          iconClass="31dingwei"
          style="color: #fff; width: 30px; height: 40px; cursor: pointer"
        ></icon>
        <span>{{ item.place }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      color: "rgba(37, 71, 153, 0.8)",
    };
  },
  props: {
    activityContent: Array,
  },
  computed: {
    // 跳转,变化后修改背景色
    getBgColor: function () {
      const map = new Map([
        [1, "rgba(37, 71, 153, 0.8)"],
        [2, "rgba(214, 72, 65, 0.5)"],
        [3, "rgba(243, 181, 98, 0.5)"],
      ]);
      let index = this.$store.state.ruler.index;
      if ([1, 2, 3].indexOf(index) == -1) {
        return this.color;
      }
      this.color = map.get(index);
      return this.color;
    },
  },
};
</script>

<style lang="less" scoped>
.activity-out-box {
  height: calc(100vh - 180px);
  overflow: auto;
}
.white-omit {
  width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #ffffff;
  transition: 0.5s;
}
.white-omit:hover {
  width: 100%;
}
span {
  color: #ffffff;
  font-family: Gotu;
  font-weight: regular;
  font-size: 20px;
  letter-spacing: 0px;
}

.activityItem {
  width: 100%;
  display: flex;
  height: 8vh;
  line-height: 8vh;
  background-color: rgba(37, 71, 153, 0.8);
}

.time {
  width: 30%;
}

.time span {
  margin-left: 16px;
}

.title {
  width: 50%;
}

.location {
  width: 20%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #ffffff;
}

.time svg {
  margin-left: 16px;
}

.location span {
  position: relative;
  line-height: 8vh;
  margin-left: 12px;
  top: 0px;
}
.location svg {
  position: relative;
  top: 8px;
}
.time svg {
  position: relative;
  top: 2px;
}
@media screen and (max-width: 480px) {
  .location,
  .time {
    display: none;
  }
  .title {
    width: 100%;
  }
  .white-omit {
    width: 100%;
  }
}
</style>
